<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="user/_fragment :: head(~{::title})">
    <title>博客管理后台</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">

<!--头部导航-->
<nav th:replace="user/_fragment :: left-menu"></nav>
<!----------------------------------------------------------------------------------------->

<!-- 内容区域 -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            修改密码
            <small>weblog</small>
        </h1>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <!-- right column -->
            <div class="col-md-12">
                <!-- Horizontal Form -->
                <div class="box box-info">
                    <!--<div class="box-header with-border" >-->
                    <!--<h3 class="box-title">以下是您的个人信息。如需修改密码，请点击<a href="changePassword.html">这里</a></h3>-->
                    <!--</div>-->
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form class="form-horizontal" th:action="@{/user/change}" method="post">

                        <div class="box-body">
                            <!-- forbidden -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">原来密码</label>
                                <div class="col-sm-10">
                                    <input onblur="check()" id="before" name="password" type="password" class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">更新密码</label>
                                <div class="col-sm-10">
                                    <input onblur="check()" id="password" type="password" name="newPass" class="form-control">
                                </div>
                            </div>
                            <!-- select -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">确认密码</label>
                                <div class="col-sm-10">
                                    <input onblur="check()" id="rpassword" type="password" name="username" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <p th:text="${errorMessage}" id="errorMessage" style="color: darkred"></p>
                            <!--<button type="reset" class="btn btn-default" style="margin-left: 1px">重置</button>-->
                            <button onclick="check()" id="submit" plain type="submit" class="btn btn-info pull-right">提交修改</button>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- 内容区域 /-->

<!----------------------------------------------------------------------------------------->
<!--底部footer-->
<footer th:replace="user/_fragment :: footer"></footer>
</body>

<th:block th:replace="user/_fragment :: script">
</th:block>
<script>
    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }
    $(document).ready(function() {
        // 激活导航位置
        setSidebarActive("changePass");
    });
    function check() {
        if(before()==true&&checkPass()==true&&checkRPass()==true){
            $("#submit").attr("disabled", false);
        }
        else{
            $("#submit").attr("disabled", true);
        }
    }
    function before(){
        let before=document.getElementById("before").value;
        if (before==""){
            $("#errorMessage").html("请输入原来的密码");
            return false;
        }
        let reg=/^\d{6}$/;
        if(reg.test(before)){
            $("#errorMessage").html("");
            return true;
        }else{
            $("#errorMessage").html("密码输入错误");
            return false;
        }
    }
    function checkPass(){
        let password=document.getElementById("password").value;
        if (password==""){
            $("#errorMessage").html("密码不能为空");
            return false;
        }
        let reg=/^\d{6}$/;
        if(reg.test(password)){
            $("#errorMessage").html("");
            return true;
        }else{
            $("#errorMessage").html("请输入6位纯数字的密码");
            return false;
        }
    }
    function checkRPass(){
        let rpassword=document.getElementById("rpassword").value;
        if (rpassword==""){
            $("#errorMessage").html("请再次输入密码");
            return false;
        }
        let password=document.getElementById("password").value;
        if(password==rpassword){
            $("#errorMessage").html("");
            return true;
        }else{
            $("#errorMessage").html("两次输入密码不一致，请重新输入");
            return false;
        }
    }
</script>

</html>
